import { useSelector } from "react-redux";
import { selectToken } from "@slice/credential";
import { Navigate, Outlet, useLocation } from "react-router-dom";
import React from "react";

interface Props {
  children?: React.ReactElement; // 可选的React元素作为子组件
}

export default function AuthRoute({ children }: Props) {
  // 获取用户登录凭据
  const token = useSelector(selectToken);
  const { pathname, search, hash } = useLocation();
  // 判断 token 是否存在
  if (!token)
    return (
      <Navigate
        to="/login"
        replace={true}
        state={{ from: pathname + search + hash }} // 重定向到登录页面，并传递当前页面的路径作为参数
      />
    );
  // 如果开发者通过 children 的方式传递要保护的组件
  if (typeof children !== "undefined") return children; // 如果存在子组件，则直接返回子组件
  return <Outlet />; // 否则，使用Outlet渲染子路由
}
